<template>
  <div class="detail_recommendation">
    <h3 class="title">Recommendation</h3>
    <div class="detail_recommendation-swiper">
      <swiper :options="options">
        <swiper-slide v-for="(item, index) in data" class="productItem item" :key="item + index">
          <!-- <el-image style="width: 100%; height: 100%; border-radius: 12px;" :src="utils.setCdnUrl() + item.image"></el-image> -->
          <div class="product_image" @click="$router.push({path: '/product/' + item.set_link})" :style="'background-image:url('+utils.setCdnUrl() + item.image+')'"></div>
          <div style="margin-top: 16px;" @click="$router.push({path: '/product/' + item.set_link})">{{item.title}}</div>
        </swiper-slide>
      </swiper>
    </div>
    <el-row :gutter="40" class="detail_recommendation-pc">
      <el-col :span="6" v-for="(item, index) in data" :key="item.set_link + index">
        <div class="item" style="width: 378px;" @click="$router.push({path: '/product/' + item.set_link})">
          <el-image style="width: 378px; height: 378px; border-radius: 12px;" :src="utils.setCdnUrl() + item.image"></el-image>
          <div style="margin-top: 16px;">{{item.title}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      options: {
        loop: false,//是否循环
        slidesPerView: 1.2,
        spaceBetween: 24,
      },
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.productItem{
  width: 80%;
  margin-right: 20px;
  .product_image{
    width: 100%;
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ebeaea;
    cursor: pointer;
    height: 0;
    position: relative;
    border-radius: 5%;
  }
}
  .detail_recommendation {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background: #FFFFFF;
    width: 100%;
    margin-top: 56px;
    margin-bottom: 90px;

    .title {
      color: #191919; 
      font-size: 32px;
      margin-bottom: 24px;
    }

    .item {
      cursor: pointer;
      // display: flex;
      // flex-direction: column;
      &:hover {
        color: #6C7E59;
      }
    }
  }
  .detail_recommendation-swiper {
    width: 100vw;
    display: none;
  }
  @media screen and (max-width: 768px) {
    .detail_recommendation {
      margin-top: 0;
      align-items: flex-start;
      padding: 20px;
      margin-bottom: 46px;

      .title {
        font-size: 20px;
        margin-bottom: 16px;
      }
    }
    .detail_recommendation-pc {
      display: none;
    }
    .detail_recommendation-swiper {
      width: 100vw;
      display: block;
    }
    // .swiper-slide {
    //   width: 22%;
    // }
  }
</style>